@import "./varables.scss";
@import "./mixin.scss";
body {
  overflow: hidden;
}
.app {
  @include full-percent;
  overflow: hidden;
  .ui.divider:not(.vertical):not(.horizontal) {
    border-top: 1px solid #eee;
  }
  .main {
    background: $skin;
    flex-direction: column;
    text-align: center;
    @include full-percent;
    @media screen and (orientation: portrait) {
      // 竖屏
      .logo { padding-top: 40%; }
      .buttons { padding-top: 25%; }
    }
    @media screen and (orientation: landscape) {
      // 横屏
      .logo { padding-top: 5%; }
      .buttons { padding-top: 2%; }
    }
    .svg {
      animation: offset 1s linear infinite alternate;
      -webkit-animation: offset 1s linear infinite alternate;
    }
  }
}
@keyframes offset {
  from { @include offset-from; }
  to { @include offset-to; }
}
@-webkit-keyframes offset {
  from { @include offset-from; }
  to { @include offset-to; }
}
// 路由过场动画 fade
.fade-enter {
  opacity: 0;
  @include scale-0;
}
.fade-enter.fade-enter-active {
  opacity: 1;
  transform-origin: center center;
  @include scale-1;
  @include transition(300ms);
}
.fade-exit{
  opacity: 1;
  @include scale-1;
}
.fade-exit.fade-exit-active{
  opacity:0;
  transform-origin: center center;
  @include scale-0;
  @include transition(300ms);
}
